<template>
  <div style="height: 100%;width:100%;display: flex;">
    <div class="left">
      <img class="image" src="@/assets/images/background.jpg">
    </div>
    <div class="right">
      <el-card class="card">
        <div class="title">高校教务系统-注册页面</div>
        <el-select v-model="identity" class="m-2" placeholder="您的身份" style="margin-left: 20px;width:150px;">
          <el-option
              v-for="item in identities"
              :key="item.id"
              :label="item.identityName"
              :value="item.id"
          />
        </el-select>

        <div v-if="identity==1" class="form">
          <el-input  v-model="stuRegisterForm.username" class="input" placeholder="输入你的学号" />
          <el-input  v-model="stuRegisterForm.name" class="input" placeholder="输入你的姓名" />
          <el-input  v-model="stuRegisterForm.password" class="input" placeholder="输入你的密码" />
          <el-select v-model="grade" class="m-2" placeholder="选择年级" style="width:150px;">
            <el-option
                v-for="item in grades"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </div>

        <div v-else class="form">
          <el-input  v-model="teaRegisterForm.username" class="input" placeholder="输入你的工号" />
          <el-input  v-model="teaRegisterForm.name" class="input" placeholder="输入你的姓名" />
          <el-input  v-model="teaRegisterForm.password" class="input" placeholder="输入你的密码" />
          <el-input  v-model="teaRegisterForm.phone" class="input" placeholder="输入你的电话号码" />
          <el-input  v-model="teaRegisterForm.email" class="input" placeholder="输入你的邮箱" />
          <el-input  v-model="teaRegisterForm.academy" class="input" placeholder="所在学院" />
        </div>
        <el-button type="primary" class="register-button" @click="register" round>快速注册</el-button>
        <a style="color:#888888;font-size: 13px;float: right;margin-right: 20px;cursor: pointer;" @click="gotoLogin()">去登录</a>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { useRouter } from 'vue-router';
import {majorItem, reqMajorInfo} from "@/api/system/type";
import { getAllMajor } from "@/api/system";
import {reqRegisterStudent} from "@/api/student/type";
import {reqTeaRegister} from "@/api/teacher/type";
import { stuRegister } from "@/api/student";
import { teaRegister } from "@/api/teacher";

const router = useRouter()
const identities = [
  {
    id:1,
    identityName:'学生'
  },
  {
    id:2,
    identityName:'老师'
  },
]
const identity = ref()
const grades = [2020,2021,2022,2023]
const grade = ref()
const reqMajorForm = reactive<reqMajorInfo>({
  // majorName:'',
  page:0,
  pageSize:10
})
const stuRegisterForm = reactive<reqRegisterStudent>({
  username:'',
  password:'',
  name:'',
  grade: 0
})
const teaRegisterForm = reactive<reqTeaRegister>({
  username:'',
  password:'',
  name:'',
  email:'',
  phone:'',
  academy:'',
})
onMounted(async ()=> {

})
const gotoLogin = () => {
  router.push('/login')
}
const register = async () => {
  if (identity.value == 1) {
    //学生注册逻辑
    stuRegisterForm.grade = grade.value
    console.log(stuRegisterForm.grade)
    const res = await stuRegister(stuRegisterForm)
    console.log(res)
    if ( res.code == 200 ) {
      ElMessageBox.alert(res.message, '提示', {
        confirmButtonText: '去登录',
        callback: (action: Action) => {
          router.push('/login')
        },
      })
    }
    else {
      ElMessage.error(res.message)
    }
  }
  else {
    //老师注册逻辑
    const res = await teaRegister(teaRegisterForm)
    if ( res.code == 200 ) {
      ElMessageBox.alert(res.message, '提示', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: '去登录',
        callback: (action: Action) => {
          router.push('/login')
        },
      })
    }
    else {
      ElMessage.error(res.message)
    }
  }
}
</script>

<style scoped>
.left {
  height:100%;
  width:62%;
  display: inline-block;
}
.image {
  width:100%;
  height: 100vh;
}
.right {
  height:100vh;
  width:38%;
  display: inline-block;
  background-color: white;
}
.card {
  width:450px;
  /*height:460px;*/
  margin: 0 auto;
  margin-top: 25%;
  padding-bottom: 20px;
}
.title {
  margin-top: 10px;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 45px;
}
.form {
  padding:20px;
}
.input {
  /*margin-left: 10%;*/
  height: 40px;
  margin-bottom: 20px;
  width:100%;
}

.register-button {
  margin: 0 auto;
  margin-top: 10px;
  background-color: #409EFF;
  width:120px;
  height:40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  cursor: pointer;
}
.radio {
  margin-top: 10px;
  margin-left: 10%;
}
</style>
